<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EasyKiConverter - 嘉立创EDA转KiCad工具</title>
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007ACC'%3E%3Cpath d='M12 2L2 7v10l10 5 10-5V7l-10-5zM4 8.5l8-4 8 4v7l-8 4-8-4v-7z'/%3E%3Ccircle cx='12' cy='12' r='3' fill='white'/%3E%3C/svg%3E">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="container">
        <nav class="navbar">
            <div class="nav-brand">
                <h2>EasyKiConverter</h2>
            </div>
            <div class="nav-menu">
                <a href="#" class="nav-item active" data-page="component">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 2L2 7v10l10 5 10-5V7l-10-5zM4 8.5l8-4 8 4v7l-8 4-8-4v-7z"/>
                        <circle cx="12" cy="12" r="3" fill="currentColor"/>
                    </svg>
                    元件转换
                </a>

                <a href="https://github.com/tangsangsimida/EasyKiConverter" target="_blank" class="nav-item">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                    </svg>
                    GitHub
                </a>
            </div>
        </nav>

        <header>
            <h1>EasyKiConverter</h1>
            <p>一个用于将嘉立创EDA的元器件导出为KiCad格式的便捷工具</p>
        </header>

        <main>
            <div class="form-container">
                <h2>输入嘉立创元器件编号</h2>
                <form id="export-form">
                    <div class="form-group">
                        <label for="urls">元器件编号（每行一个）</label>
                        <textarea id="urls" name="urls" rows="5" placeholder="例如：
C12345
C67890
C98765
"></textarea>
                        
                        <div class="bom-upload-section">
                            <h4>或者上传BOM表批量导入</h4>
                            <div class="file-upload-area" id="file-upload-area">
                                <input type="file" id="bom-file" accept=".xlsx,.xls,.csv" style="display: none;">
                                <div class="upload-content">
                                    <div class="upload-icon">📄</div>
                                    <p>点击选择BOM文件或拖拽文件到此处</p>
                                    <p class="file-info">支持 .xlsx, .xls, .csv 格式</p>
                                </div>
                            </div>
                            <div id="file-status" class="file-status" style="display: none;"></div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="output_folder_path">自定义库保存路径（可选）</label>
                        <input type="text" id="output_folder_path" name="output_folder_path" placeholder="留空将默认保存到工作区根目录的output文件夹">
                    </div>

                    <div class="form-group">
                        <label for="output_lib_name">自定义库名称（可选）</label>
                        <input type="text" id="output_lib_name" name="output_lib_name" placeholder="例如：my_project，留空默认为easyeda_convertlib">
                    </div>

                    <div class="export-options">
                        <h3>导出选项</h3>
                        <label class="checkbox-label">
                            <input type="checkbox" id="export_symbol" name="export_symbol" checked>
                            <span class="checkbox-checkmark"></span>
                            导出原理图符号 (.kicad_sym)
                        </label>
                        <label class="checkbox-label">
                            <input type="checkbox" id="export_footprint" name="export_footprint" checked>
                            <span class="checkbox-checkmark"></span>
                            导出PCB封装 (.kicad_mod)
                        </label>
                        <label class="checkbox-label">
                            <input type="checkbox" id="export_3d_model" name="export_3d_model" checked>
                            <span class="checkbox-checkmark"></span>
                            导出3D模型 (.step)
                        </label>
                    </div>

                    <button type="submit" id="export-btn" class="primary-btn">
                        <span class="btn-text">开始导出</span>
                        <div class="loading-spinner"></div>
                    </button>
                </form>
            </div>

            <div id="progress-container" class="progress-container" style="display: none;">
                <div class="progress-bar">
                    <div id="progress-fill" class="progress-fill"></div>
                </div>
                <div id="progress-text" class="progress-text"></div>
            </div>

            <div id="results-container" class="results-container" style="display: none;">
                <h3>导出结果</h3>
                <div id="results-list"></div>
            </div>
        </main>

        <footer>
            <p>&copy; 2024 EasyKiConverter. All Rights Reserved.</p>
        </footer>
    </div>

    <script src="js/script.js"></script>
</body>
</html>